<template>
  <div class="self">
    <!--显示状态开始-->
    <self-result :isMargin="true" :NoData="msgText" :isShow="isShow"/>
    <!---显示状态结束-->

    <!--自主记录开始-->
    <self-card :selfInfoData="selfInfoData"/>
    <!--自主记录结束-->

    <!--过渡动画开始-->
    <self-load contFont="正在加载中..." :isLoadShow="isLoadShow"/>
    <!--过渡动画结束-->
  </div>
</template>

<script>
import selfResult from 'components/inquiry-result/inquiry-result'
import selfCard from 'components/inquiry-card/inquiry-card'
import selfLoad from 'components/inquiry-laod/inquiry-laod'
import {mapActions} from 'vuex'
import axios from 'axios'
export default {
  data () {
    return {
      isShow: false, // 没有数据加载
      selfInfoData: [], // 自助记录开始
      msgText: '' || '暂无记录', // 加载没有数据得原因
      isLoadShow: false // 过渡组件是否加载
    }
  },
  components: {
    selfResult,
    selfCard,
    selfLoad
  },
  created () {
    document.title = '我的补偿记录'
    this.selfOpenId()
  },
  // 路由拦截
  /*
  beforeRouteEnter (to, form, next) {
    const url = document.location.href
    let openID = ''
    if (url.indexOf('vsession') > -1) {
      let res = url.match(/openId=(.*)&/)[1]
      openID = res
    } else {
      openID = '123456789'
    }
    console.log(213213)
    const data = {
      url: '/api/3upsi_delay/dp/custApply/getApplyOrderByOpenid',
      userMsg: {
        openid: openID,
        timeSpan: '0'
      }
    }
    axios({
      method: 'post',
      url: data.url,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      data: data.userMsg,
      transformRequest: [function (data) {
        let ret = []
        for (let it in data) {
          ret.push(encodeURIComponent(it) + '=' + encodeURIComponent(data[it]))
        }
        return ret.join('&')
      }]
    })
      .then(res => {
        console.log(res.data)
        if (res.data.length === 1) {
          const info = {
            'flightNo': res.data[0].flightNo,
            'state': res.data[0].state,
            'lclDptDate': res.data[0].lclDptDate,
            'paxName': res.data[0].paxName,
            'flightLine': res.data[0].flightLine,
            'applyAmount': res.data[0].applyAmount,
            'idNo': res.data[0].idNo,
            'payDate': res.data[0].payDate
          }
          sessionStorage.setItem('myInfoData', JSON.stringify(info))
          next({name: 'inquiryDateils', params: {myselfData: info}})
        } else {
          next()
        }
      })
      .catch(err => {
        console.log(err)
        next(vm => {
          vm.isLoadShow = false
          vm.isShow = true
          vm.msgText = '查询失败请稍后再试'
        })
      })
  },
  */
  methods: {
    // 获取到openid
    selfOpenId () {
      const url = document.location.href
      this.isLoadShow = true
      if (url.indexOf('vsession') > -1) {
        let res = url.match(/openId=(.*)&/)[1]
        this.selfDataAxios(res)
      } else {
        // selfDataAxios ()
        // 跳转到微信登录页面
        let res = url.match(/code=(.*)&state(.*)/ig)[0]
        if (sessionStorage.getItem('userIdRes') === null) {
          // localStorage.setItem('userIdRes', '' + res)
          sessionStorage.setItem('userIdRes', res)
          // 根据code和state去后台 异步请求访问mkxzki.natappfree.cc/3upsi_delay/weixin/callback即可返回openid
          let form = {
            url: `callback?${res}`
          }
          axios({
            method: 'get',
            url: form.url,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          })
            .then(res => {
              if (res.data.openid === undefined) {
                console.log(res.data.openid)
                console.log(1)
              } else {
                sessionStorage.setItem('userIdOpenId', JSON.stringify(res.data.openid))
                this.getWxUserData(res.data.openid)
                this.selfDataAxios(res.data.openid)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.getWxUserData(JSON.parse(sessionStorage.getItem('userIdOpenId')))
          this.selfDataAxios(JSON.parse(sessionStorage.getItem('userIdOpenId')))
        }
        sessionStorage.setItem('openIdC', this.isOpenId)
      }
    },
    selfDataAxios (openId) {
      if (openId === 'undefined') {
        openId = ''
      }
      const data = {
        url: '/api/3upsi_delay/dp/custApply/getApplyOrderByOpenid',
        userMsg: {
          openid: openId,
          timeSpan: '0'
        }
      }
      this._axios.postAxiosData(data)
        .then(res => {
          console.log(res.data)
          if (res.data.state === false) {
            this.isLoadShow = false
            this.isShow = true
            this.msgText = res.data.msg
          } else {
            if (res.data.length === 0) {
              this.isLoadShow = false
              this.isShow = true
              this.msgText = '暂无记录'
            }
            if (res.data.length >= 2) {
              this.isLoadShow = false
              this.selfInfoData = res.data
            }
            if (res.data.length === 1) {
              const info = {
                'flightNo': res.data[0].flightNo,
                'state': res.data[0].state,
                'lclDptDate': res.data[0].lclDptDate,
                'paxName': res.data[0].paxName,
                'flightLine': res.data[0].flightLine,
                'applyAmount': res.data[0].applyAmount,
                'idNo': res.data[0].idNo,
                'payDate': res.data[0].payDate
              }
              sessionStorage.setItem('myInfoData', JSON.stringify(info))
            }
          }
        })
        .catch(err => {
          this.isLoadShow = false
          this.isShow = true
          this.msgText = '查询失败请稍后再试'
          console.log(err.data)
        })
    },
    ...mapActions('myselfData/', ['getWxUserData'])
  }
}
</script>

<style lang="scss" scoped>
.self {
  padding-top: 2.8rem;
}
</style>
